<!-- 缴纳首期账单页面 -->
<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-pay-bill-container`]">
      <view class="bill-list" v-for="(item, index) in fee_list" :key="index">
        <view class="desc">
          <view class="title">{{ item.remark }}</view>
        </view>
        <view class="price">{{ item.total }}元</view>
      </view>
      <view class="fixed-button" :style="{ bottom: `${safeAreaInsets}rpx` }">
        <view class="payment-info">
          合计付款￥ <span class="price">{{ total_amount }}</span>
        </view>
        <uv-button type="" text="立即付款" customStyle="margin-top: 10px" @click="submit"></uv-button>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { bestNotify } from '@/api/bestSign'
import { mapActions, mapGetters } from 'vuex'
import { couponData, needPay } from './api'

export default {
  name: 'pay-bill',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      safeAreaInsets: 0,
      belong_type: '',
      message: '共3项账单9999',
      fee_list: [],
      total_amount: 0,
      project_id: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    this.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    await this.syncNotify()
    await this.getData()
    await this.getcoupon()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { contractId } = this.$Route.query
      const { data = {} } = await needPay({ contract_id: contractId, belong_type: this.belong_type })
      this.fee_list = data.fee_list || []
      this.total_amount = data.total_amount
      this.project_id = data.project_id
    },
    async syncNotify() {
      const { contractId, signID, code } = this.$Route.query
      const { data = {} } = await bestNotify({ code, id: contractId, signID, usertype: 1 })
      this.belong_type = data.belongType
    },
    async getcoupon() {
      const { contractId = '' } = this.$Route.query
      const data = await couponData({ belong_type: this.belong_type, contract_id: contractId })
    },
    submit() {
      const { contractId = '' } = this.$Route.query
      const belongType = this.belong_type
      this.$ROUTE.go('/pages/payment/index', { projectId: this.project_id, scene: 'bill', amount: this.total_amount, contractId, couponIds: [], belongType })
      // this.$ROUTE.go('/pages/payment/index', { projectId: this.project_id, scene: 'bill', amount: this.total_amount })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('pay-bill-container')} {
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
  .bill-list {
    background: white;
    overflow: hidden;
    margin-top: 10px;
    padding: 15px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .desc {
      .date {
        margin-top: 5px;
        font-size: 10px;
      }
    }
    .price {
      margin-left: auto;
    }
  }
  .fixed-button {
    position: fixed;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    // padding: 20rpx 0rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    display: flex;
    .payment-info {
      width: 200px;
      padding: 10px 20px;
      background: $uv-primary;
      display: flex;
      align-items: center;
      color: white;
      .price {
        font-size: 26px;
      }
    }
    ::v-deep .uv-button-wrapper {
      flex: 1;
      padding: 0px 10px;
      margin: 0;
      // margin: 0 15px;
      // width: calc(100vw - 200px);
    }
  }
}
</style>
